import { CustomTheme } from '@/context/ThemeContext';
import { View } from '@tarojs/components';
import { Scan, Qr, SettingOutlined, Plus, Edit } from '@taroify/icons';
import { Image, Button, Swiper } from '@taroify/core';
import { getPaddingTop } from '@/utils/back';
import { addUnits, imgAddPrefix } from '@/utils';
import { VIP } from '@/config/tip';
import Tabs from '@/components/menu/Tabs';
import { RenderIcons, RenderTagList } from '@/utils/render';
import Waterfall from '@/components/list/waterfall';
import { useState } from 'react';
import Taro, { useLoad } from '@tarojs/taro';
import { clearUser, getToken, getUser } from '@/utils/auth';
import { UserBasic } from '@/types/auth';

const My = () => {
  const paddingTop = getPaddingTop();
  const othertInfo = [
    {
      label: '作品',
      value: 200,
    },
    {
      label: '关注',
      value: 268,
    },
    {
      label: '粉丝',
      value: 880000,
    },
    {
      label: '点赞',
      value: 1000000,
    },
  ];
  const [index, setIndex] = useState(0);
  const menus = ['主页', '点赞', '收藏', '私密'];
  const [user, setUser] = useState<UserBasic>();
  const handleChange = (i: number) => {
    setIndex(i);
    Taro.pageScrollTo({
      scrollTop: 300,
      duration: 300,
    });
  };
  function logout(): void {
    clearUser();
    Taro.navigateTo({ url: '/pages/auth/login' });
  }
  useLoad(() => {
    if (getToken()) {
      setUser(getUser());
    }
  });
  return (
    <View className="px-4 flex flex-col gap-6" style={{ paddingTop }}>
      <View className="flex gap-4">
        <SettingOutlined size={24} />
        <Qr size={24} />
        <Scan size={24} />
      </View>
      <View className="flex justify-between items-center">
        <View className="flex gap-5 items-center">
          <Image
            shape="circle"
            width={120}
            height={120}
            src={imgAddPrefix(user?.avatar ?? '')}
          />
          <View className=" text-[#B3B3B3]">
            <View className="text-black mb-1 flex items-center gap-1">
              <View>{user?.name}</View>
              <Edit size={20} />
            </View>
            <View>
              <View className="text-xs ">ID:{user?.ID}</View>
              {RenderTagList({
                tags: [
                  { id: 1, label: '鸳鸯戏' },
                  { id: 2, label: 'yy' },
                  { id: 3, label: '黄昏的路灯照不亮完整的xxxx' },
                ],
                checked: false,
                avatar: false,
                maxHeight: '1.6rem',
              })}
              {RenderIcons({
                icons: [
                  'https://img.yzcdn.cn/vant/cat.jpeg',
                  'https://img.yzcdn.cn/vant/cat.jpeg',
                  'https://img.yzcdn.cn/vant/cat.jpeg',
                  'https://img.yzcdn.cn/vant/cat.jpeg',
                ],
                size: 24,
              })}
            </View>
          </View>
        </View>
        <Button
          className="w-20"
          size="small"
          variant="contained"
          color="primary"
          icon={<Plus />}
          shape="round"
        >
          发布
        </Button>
      </View>
      <View className="flex justify-between items-center px-3 py-2 bg-[#FBF4E8] rounded text-[#ffb949]">
        <View>{VIP}</View>
        <Button color="warning" size="mini" shape="round" className="w-16">
          首月5元
        </Button>
      </View>
      <View className="flex justify-around items-center w-full">
        {othertInfo.map(el => {
          return (
            <View
              key={el.label}
              className="flex gap-1 flex-col justify-center items-center"
            >
              <View className="font-bold">{addUnits(el.value)}</View>
              <View className="text-[#B3B3B3]">{el.label}</View>
            </View>
          );
        })}
      </View>
      <Tabs menus={menus} change={handleChange} select={index}></Tabs>
      <Swiper
        value={index}
        className=" w-full h-full"
        onChange={handleChange}
        loop={false}
        lazyRender
        stopPropagation={false}
      >
        {menus.map((_, i) => (
          <Swiper.Item className="overflow-y-auto" key={i}>
            <Waterfall />
          </Swiper.Item>
        ))}
      </Swiper>
    </View>
  );
};

export default () => (
  <CustomTheme>
    <My />
  </CustomTheme>
);
